<template>
  <div class="bar">
    <div class="title box">
      <div>
        <span>产品返修信息</span>
      </div>

      <div>
        <a-button @click="editFomHandle" v-show="!isEditInfoFormShow"
          >编辑修改</a-button
        >
        <a-button
          @click="isEditInfoFormShow = !isEditInfoFormShow"
          v-show="isEditInfoFormShow"
          >放弃编辑</a-button
        >
        <a-button
          type="primary"
          @click="confirmEditFom"
          v-show="isEditInfoFormShow"
          >编辑完成</a-button
        >
      </div>
    </div>

    <div v-show="!isEditInfoFormShow">
      <a-row :gutter="[8, 8]">
        <a-col :span="6" v-for="(item, index) in infoLists" :key="index">
          <div class="itemWrap">
            <div class="label">
              <span>{{ item.name }}</span>
            </div>
            <div class="separator"><span>:</span></div>
            <div class="content">
              <span>{{ item.value }}</span>
            </div>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="[8, 8]">
        <a-col :span="24">
          <div class="itemWrap imgBox">
            <div class="label">
              <span>图片</span>
            </div>
            <div class="separator"><span>:</span></div>
            <div class="content ">
              <div
                class="imgWrap"
                style="width: 120px;height: 120px;"
                v-for="(item, index) in imgLists"
                :key="index"
                @click="imgHandle(item)"
              >
                <img
                  :src="item.pictureUrl"
                  alt=""
                  style="width: 100%;height: 100%;"
                />
              </div>
            </div>
          </div>
        </a-col>
      </a-row>

      <div class="" style="text-align: right;">
        <template v-if="info.status === 2">
          <a-button type="primary" @click.stop="confirmOrder(info)"
            >确认收货</a-button
          >
        </template>
        <template v-else-if="info.status === 3">
          <a-button type="primary" @click.stop="confirmAssign(info)"
            >指派</a-button
          >
        </template>
        <template v-else-if="info.status === 4">
          <a-button type="primary" @click.stop="confirmOrder(info)"
            >确认收货</a-button
          >
        </template>
        <template v-else-if="info.status === 5">
          <a-button type="primary" @click.stop="confirmFix(info)"
            >开始维修</a-button
          >
        </template>
        <template v-else-if="info.status === 6">
          <a-button type="primary" @click.stop="confirmFixDone(info)"
            >维修完成</a-button
          >
          <a-button type="primary" @click.stop="confirmAssign(info)"
            >指派</a-button
          >
        </template>
        <template v-else-if="info.status === 8">
          <a-button type="primary" @click.stop="confirmRepairDone(info)"
            >返修完成</a-button
          >
          <a-button type="primary" @click.stop="confirmAssign(info)"
            >指派</a-button
          >
        </template>
        <template v-else-if="info.status === 11">
          <a-button type="primary" @click.stop="confirmOrder(info)"
            >确认收货</a-button
          >
        </template>
      </div>
    </div>

    <!-- 编辑 -->
    <div class="custom" v-show="isEditInfoFormShow">
      <a-form-model
        ref="editInfoForm"
        :model="editInfoForm"
        :rules="editInfoFormRules"
        v-bind="modelFormlayout"
      >
        <a-form-model-item label="客户名称" prop="customerName">
          <a-input v-model="editInfoForm.customerName" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="机床厂家" prop="companyName">
          <a-input v-model="editInfoForm.companyName" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="返修件类型" prop="productType">
          <a-select
            v-model="editInfoForm.productType"
            style="width: 100%;"
            :options="productTypeLists"
            @change="productTypeHandle"
          >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="返修件型号" prop="productModel">
          <a-input
            v-if="editInfoForm.hasProductModelLists"
            v-model="editInfoForm.productModel"
            allow-clear
          />
          <a-select
            v-else
            v-model="editInfoForm.productModel"
            style="width: 100%;"
            :options="productModelLists"
          >
          </a-select>
          <!-- <a-select
            v-model="editInfoForm.productModel"
            style="width: 100%;"
            :options="productModelLists"
          >
          </a-select> -->
        </a-form-model-item>
        <a-form-model-item label="返修件编号" prop="productNumber">
          <a-input v-model="editInfoForm.productNumber" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="保修状态" prop="warrantyStatus">
          <a-select
            v-model="editInfoForm.warrantyStatus"
            style="width: 100%;"
            :options="warrantyStatusLists"
          >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="故障信息" prop="faultInformation">
          <a-textarea
            v-model="editInfoForm.faultInformation"
            :autoSize="{ minRows: 1, maxRows: 4 }"
            allow-clear
          />
        </a-form-model-item>
        <a-form-model-item label="返回地址" prop="returnAddress">
          <a-input v-model="editInfoForm.returnAddress" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="联系人姓名" prop="returnContactName">
          <a-input v-model="editInfoForm.returnContactName" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="联系人电话" prop="returnContactPhone">
          <a-input v-model="editInfoForm.returnContactPhone" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="快递公司" prop="expressCompany">
          <a-input v-model="editInfoForm.expressCompany" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="快递单号" prop="expressNumber">
          <a-input v-model="editInfoForm.expressNumber" allow-clear />
        </a-form-model-item>
      </a-form-model>
      <ImageList
        :isValid="false"
        ref="imageList"
        :imgList="editImgList"
      ></ImageList>
    </div>

    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img style="width: 100%" :src="previewImage" />
    </a-modal>

    <a-modal
      v-model="isAssignShow"
      title="指派"
      class="dispatch-modal"
      okText="确定"
      cancelText="取消"
      @ok="assignModalOKBtn"
      @cancel="assignModalCloseBtn"
    >
      <a-form-model
        ref="assignForm"
        :model="assignForm"
        :rules="assignFormRules"
        v-bind="modelFormlayout"
      >
        <a-form-model-item label="指派工程师" prop="repairAssignValue">
          <a-select
            v-model="assignForm.repairAssignValue"
            style="width: 100%;"
            allow-clear
            show-search
            :options="assignLists"
            :filter-option="filterAssignUsername"
          >
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <a-modal
      v-model="isFixDoneShow"
      title="维修结果"
      class="dispatch-modal"
      okText="确定"
      cancelText="取消"
      @ok="confirmFixDoneOkBtn"
      @cancel="confirmFixDoneCloseBtn"
    >
      <a-form-model
        ref="fixDoneForm"
        :model="fixDoneForm"
        :rules="fixDoneRules"
        v-bind="modelFormlayout"
      >
        <a-form-model-item label="指派工程师" prop="assign">
          <a-select
            v-model="fixDoneForm.assign"
            style="width: 100%;"
            allow-clear
            show-search
            :options="assignLists"
            :filter-option="filterAssignUsername"
          >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="故障类型" prop="reason">
          <a-select
            v-model="fixDoneForm.reason"
            style="width: 100%;"
            allow-clear
            :options="faultTypeLists"
            @change="faultTypeHandle"
          ></a-select>
        </a-form-model-item>
        <a-form-model-item label="故障细分" prop="faultSubdivision">
          <a-select
            v-model="fixDoneForm.faultSubdivision"
            style="width: 100%;"
            allow-clear
            :options="faultTypeDetailLists"
          ></a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <a-modal
      v-model="isFinishShow"
      title="返修结果"
      class="dispatch-modal"
      okText="确定"
      cancelText="取消"
      @ok="confirmFinishOkBtn"
      @cancel="confirmFinishCloseBtn"
    >
      <a-form-model
        ref="finishForm"
        :model="finishForm"
        :rules="finishRules"
        v-bind="modelFormlayout"
      >
        <a-form-model-item label="维修结果" prop="resultType">
          <a-radio-group
            v-model="finishForm.resultType"
            :options="repairResultTypeLists"
            @change="resultTypeHandle"
          >
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          v-show="finishForm.resultType == 2"
          label="快递公司"
          prop="returnExpressCompany"
        >
          <a-input v-model="finishForm.returnExpressCompany" allow-clear />
        </a-form-model-item>
        <a-form-model-item
          v-show="finishForm.resultType == 2"
          label="快递单号"
          prop="returnExpressNumber"
        >
          <a-input v-model="finishForm.returnExpressNumber" allow-clear />
        </a-form-model-item>
        <a-form-model-item
          v-show="finishForm.resultType == 2"
          label="原地址"
          prop="isOldAdr"
        >
          <a-switch
            v-model="finishForm.isOldAdr"
            @change="resultOldAdrHandle"
            allow-clear
          />
        </a-form-model-item>
        <a-form-model-item
          v-show="finishForm.resultType == 2"
          label="返修地址"
          prop="actualReturnAddress"
        >
          <a-input v-model="finishForm.actualReturnAddress" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="备注信息" prop="remark">
          <a-textarea v-model="finishForm.remark" allow-clear />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import api from "@/server/userConfig";
import { buildLinkSelect, getRoleId, formatPictureIds } from "@/unit/tool";
import { WarrantyType, RepairResultType } from "@/unit/constantValue";
import {
  AssignRules,
  FixDoneRules,
  FinishRules,
  EditInfoFormRules
} from "./rulesConfig";
import ImageList from "./imageList";

const keyValueLists = [
  {
    name: "客户名称",
    keyName: "customerName"
  },
  {
    name: "机床厂家",
    keyName: "companyName"
  },
  {
    name: "返修件类型",
    keyName: "productType"
  },
  {
    name: "返修件型号",
    keyName: "productModel"
  },
  {
    name: "返修件编号",
    keyName: "productNumber"
  },
  {
    name: "保修状态",
    keyName: "warrantyStatus"
  },
  {
    name: "故障信息",
    keyName: "faultInformation"
  },
  {
    name: "返回地址",
    keyName: "returnAddress"
  },
  {
    name: "联系人姓名",
    keyName: "returnContactName"
  },
  {
    name: "联系人电话",
    keyName: "returnContactPhone"
  },
  {
    name: "快递公司",
    keyName: "expressCompany"
  },
  {
    name: "快递单号",
    keyName: "expressNumber"
  }
  // {
  //   name: "返修单状态",
  //   keyName: "status"
  // }
];

export default {
  name: "RepairInfo",
  components: { ImageList },
  props: {
    info: Object
  },
  data() {
    return {
      userName: "",
      name: "",
      role: "",
      compId: "",
      infoLists: [],
      imgLists: [],
      previewVisible: false,
      previewImage: "",
      rowRecord: "",
      modelFormlayout: {
        layout: "horizontal",
        labelAlign: "right",
        hideRequiredMark: true,
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      isAssignShow: false,
      assignFormRules: AssignRules,
      assignLists: [],
      assignForm: {
        repairAssignValue: ""
      },
      isFixDoneShow: false,
      fixDoneRules: FixDoneRules,
      faultTypeLists: [],
      faultTypeDetailLists: [],
      faultLinkSelect: {},
      fixDoneForm: {
        assign: "",
        reason: "",
        faultSubdivision: ""
      },
      isFinishShow: false,
      finishRules: FinishRules,
      finishForm: {
        resultType: 1,
        remark: "",
        returnExpressCompany: "",
        returnExpressNumber: "",
        actualReturnAddress: "",
        isOldAdr: false
      },
      repairResultTypeLists: RepairResultType,
      isEditInfoFormShow: false,
      editInfoFormRules: EditInfoFormRules,
      editInfoForm: {
        customerName: "",
        companyName: "",
        productType: "",
        productModel: "",
        hasProductModelLists: false,
        productNumber: "",
        warrantyStatus: "",
        faultInformation: "",
        returnAddress: "",
        returnContactName: "",
        returnContactPhone: "",
        expressCompany: "",
        expressNumber: ""
      },
      productModeSelect: {},
      productTypeLists: [],
      productModelLists: [],
      warrantyStatusLists: WarrantyType,
      editImgList: []
    };
  },
  computed: {},
  watch: {
    info: function(newVal, oldVal) {
      let _this = this;
      this.imgLists = newVal["pictures"] ? newVal["pictures"] : [];

      let picturesList = newVal["pictures"] ? newVal["pictures"] : [];
      if (picturesList.length > 0) {
        picturesList = picturesList.map((item, index) => {
          return {
            uid: item.pictureId,
            name: `${index + 1}.jpg`,
            url: item.pictureUrl,
            status: "done",
            httpUrl: item.pictureUrl
          };
        });
      }
      this.editImgList = picturesList;

      for (const key in newVal) {
        if (Object.hasOwnProperty.call(newVal, key)) {
          keyValueLists.forEach((item, index) => {
            if (item.keyName == key) {
              if (item.keyName == "warrantyStatus") {
                switch (newVal[key]) {
                  case 0:
                    item.value = "保外";
                    break;
                  case 1:
                    item.value = "保内";
                    break;
                  case 2:
                    item.value = "其他";
                    break;
                  default:
                    break;
                }
              } else if (item.keyName == "status") {
                switch (newVal[key]) {
                  case 0:
                    item.value = "返厂中";
                    break;
                  case 1:
                    item.value = "申报";
                    break;
                  case 2:
                    item.value = "指派";
                    break;
                  case 3:
                    item.value = "确认收货";
                    break;
                  case 4:
                    item.value = "指派";
                    break;
                  case 5:
                    item.value = "确认收货";
                    break;
                  case 6:
                    item.value = "开始维修";
                    break;
                  case 7:
                    item.value = "维修完成";
                    break;
                  case 8:
                    item.value = "指派";
                    break;
                  case 10:
                    item.value = "返修完成";
                    break;
                  default:
                    break;
                }
              } else {
                item.value = newVal[key];
              }
            }
          });
        }
      }

      _this.infoLists = keyValueLists;
    }
  },
  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
    imgHandle(item) {
      let { pictureUrl } = item;
      this.previewImage = pictureUrl;
      this.previewVisible = true;
    },
    // 确认收货
    confirmOrder(item) {
      let _this = this;
      this.$Modal.confirm({
        title: "是否确认收货?",
        onOk() {
          let { repairId, status } = item;
          _this.repairReceive({
            repairId,
            status,
            username: _this.userName,
            operator: _this.name
          });
        },
        onCancel() {}
      });
    },
    // 确认收货
    async repairReceive(params) {
      const res = await api.repairReceive({ ...params });
      if (res.msgCode === 0) {
        this.$message.success(res.msgDesc);
        this.$router.go(0);
      } else {
        this.$message.error(res.msgDesc);
      }
    },
    // 指派按钮
    confirmAssign(item) {
      this.isAssignShow = true;
      this.rowRecord = item;
    },
    // 指派弹框ok按钮
    assignModalOKBtn() {
      let _this = this;
      _this.$refs["assignForm"].validate(valid => {
        if (valid) {
          let { repairId } = _this.rowRecord;
          let assignUsernameAry = _this.assignForm.repairAssignValue.split(",");
          _this.repairAssign({
            repairId,
            assignUsername: assignUsernameAry[1],
            assignOperator: assignUsernameAry[0],
            username: _this.userName,
            operator: _this.name
          });
        }
      });
    },
    // 指派弹框close按钮
    assignModalCloseBtn(item) {
      let _this = this;
      _this.$refs["assignForm"].resetFields();
    },
    // 返修指派
    async repairAssign(params) {
      const res = await api.repairAssign({ ...params });
      if (res.msgCode === 0) {
        this.$message.success(res.msgDesc);
        this.isAssignShow = false;
        this.$router.go(0);
      } else {
        this.$message.error(res.msgDesc);
      }
    },
    // 获取指派人
    async getAssignList(parames, key) {
      const res = await api.getAssignList({ ...parames });

      if (res.msgCode !== 0) {
        return;
      }

      this[key] = buildSelectOption(res.data);

      function buildSelectOption(lists) {
        let _lists = [];

        _lists = lists.map((item, index) => {
          let { operator, username } = item;
          return {
            label: `${operator}  ${username}`,
            value: `${operator},${username}`
          };
        });

        return _lists;
      }
    },
    // 过滤指派人
    filterAssignUsername(input, option) {
      let str = input.replace(/\s*/g, "");
      let name = option.componentOptions.children[0].text;

      if (name == "" || name == undefined || str == "" || str == undefined) {
        return false;
      } else {
        let isMatch = name.indexOf(str) >= 0;
        return isMatch;
      }
    },
    // 开始维修按钮
    confirmFix(item) {
      let _this = this;
      this.$Modal.confirm({
        title: "是否开始维修?",
        onOk() {
          let { repairId, status } = item;
          _this.repairBeginMaintain({
            repairId,
            status,
            username: _this.userName,
            operator: _this.name
          });
        },
        onCancel() {}
      });
    },
    // 开始维修
    async repairBeginMaintain(params) {
      const res = await api.repairBeginMaintain({ ...params });
      if (res.msgCode === 0) {
        this.$message.success(res.msgDesc);
        this.$router.go(0);
      } else {
        this.$message.error(res.msgDesc);
      }
    },

    // 维修完成按钮
    confirmFixDone(item) {
      this.isFixDoneShow = true;
      this.rowRecord = item;
    },
    // 维修完成弹框ok按钮
    async confirmFixDoneOkBtn() {
      let _this = this;
      _this.$refs["fixDoneForm"].validate(valid => {
        if (valid) {
          let { repairId, status } = _this.rowRecord;
          let { assign, ...restForm } = _this.fixDoneForm;
          let assignUsernameAry = assign.split(",");
          _this.repairMaintainFinish({
            repairId,
            status,
            username: _this.userName,
            operator: _this.name,
            ...restForm,
            assignUsername: assignUsernameAry[1],
            assignOperator: assignUsernameAry[0]
          });
        }
      });
    },
    // 维修完成弹框close按钮
    confirmFixDoneCloseBtn() {
      let _this = this;
      _this.$refs["fixDoneForm"].resetFields();
    },
    // 维修完成
    async repairMaintainFinish(params) {
      const res = await api.repairMaintainFinish({ ...params });
      if (res.msgCode === 0) {
        this.$message.success(res.msgDesc);
        this.isFixDoneShow = false;
        this.$router.go(0);
      } else {
        this.$message.error(res.msgDesc);
      }
    },
    // 获取故障原因和故障细分数据
    async getFaultSubdivision(parames, objKey, lv1Key, lv2Key) {
      const res = await api.getFaultSubdivision({ ...parames });
      if (res.msgCode !== 0) {
        return;
      }
      this[objKey] = buildLinkSelect(
        res.data,
        "faultReason",
        "faultSubdivision"
      );
      this[lv1Key] = this[objKey].lv1;
      this[lv2Key] = [];
    },
    // 故障原因下拉操作
    faultTypeHandle(e) {
      let key = e;
      this.faultTypeDetailLists = this.faultLinkSelect.lv2[key];
    },
    // 返修完成按钮
    confirmRepairDone(item) {
      this.isFinishShow = true;
      this.rowRecord = item;
    },
    // 返修完成弹框ok按钮
    confirmFinishOkBtn() {
      let _this = this;
      _this.$refs["finishForm"].validate(valid => {
        if (valid) {
          let { repairId, status } = _this.rowRecord;
          let { isOldAdr, ...restForm } = _this.finishForm;
          _this.repairFinish({
            repairId,
            status,
            username: _this.userName,
            operator: _this.name,
            ...restForm
          });
        }
      });
    },
    // 维修完成弹框close按钮
    confirmFinishCloseBtn() {
      let _this = this;
      _this.$refs["finishForm"].resetFields();
    },
    // 返修完成完成
    async repairFinish(params) {
      const res = await api.repairFinish({ ...params });
      if (res.msgCode === 0) {
        this.$message.success(res.msgDesc);
        this.isFinishShow = false;
        this.$router.go(0);
      } else {
        this.$message.error(res.msgDesc);
      }
    },
    // 返修结果选择操作
    resultTypeHandle(e) {
      let value = e.target.value;
      if (value !== 2) {
        for (const key in FinishRules) {
          if (Object.hasOwnProperty.call(FinishRules, key)) {
            FinishRules[key][0]["required"] = false;
          }
        }
        this.finishForm.returnExpressCompany = "";
        this.finishForm.returnExpressNumber = "";
        this.finishForm.actualReturnAddress = "";
      } else {
        for (const key in FinishRules) {
          if (Object.hasOwnProperty.call(FinishRules, key)) {
            FinishRules[key][0]["required"] = true;
          }
        }
      }
    },
    // 是否使用原地址
    resultOldAdrHandle(e) {
      debugger;
      let value = e;
      let { returnAddress } = this.rowRecord;
      if (value) {
        this.finishForm.actualReturnAddress = returnAddress;
      } else {
        this.finishForm.actualReturnAddress = "";
      }
    },
    // 编辑表单
    editFomHandle() {
      this.isEditInfoFormShow = true;
      let info = this.info;
      for (const key in info) {
        if (Object.hasOwnProperty.call(info, key)) {
          this.editInfoForm[key] = info[key];
        }
      }
      let productTypeKey = this.editInfoForm.productType;
      this.productModelLists = this.productModeSelect.lv2[productTypeKey];
    },
    // 编辑表单完成
    confirmEditFom(item) {
      let _this = this;
      this.$Modal.confirm({
        title: "是否提交表单?",
        onOk() {
          _this.editFomDoneHandle();
        },
        onCancel() {
          // _this.isEditInfoFormShow = false;
        }
      });
    },
    // 编辑表单完成
    async editFomDoneHandle() {
      let _this = this;
      let imageListValid = await this.$refs["imageList"].getFormData();
      let pictureIds = formatPictureIds(imageListValid.data);
      _this.$refs["editInfoForm"].validate(valid => {
        if (valid) {
          debugger;
          let { repairId } = _this.info;
          let {
            pictures,
            hasProductModelLists,
            ...restForm
          } = _this.editInfoForm;
          _this.repairUpdateRepair({
            repairId,
            ...restForm,
            pictureIds,
            username: _this.userName
          });
        }
      });
    },
    // 编辑表单
    async repairUpdateRepair(params) {
      const res = await api.repairUpdateRepair({ ...params });
      if (res.msgCode === 0) {
        this.$message.success(res.msgDesc);
        this.isEditInfoFormShow = false;
        this.$router.go(0);
      } else {
        this.$message.error(res.msgDesc);
      }
    },

    async getProductModel(parames, objKey, lv1Key, lv2Key) {
      const res = await api.getProductModel({ ...parames });

      if (res.msgCode !== 0) {
        return;
      }
      this[objKey] = buildLinkSelect(res.data, "productType", "productModel");
      this[lv1Key] = this[objKey].lv1;
      this[lv2Key] = [];
    },
    // 产品类型下拉操作
    productTypeHandle(e) {
      let key = e;
      let list = this.productModeSelect.lv2[key];
      if (list.length > 0) {
        this.editInfoForm.hasProductModelLists = false;
        this.productModelLists = list;
        this.editInfoForm.productModel = list[0].value;
      } else {
        this.editInfoForm.hasProductModelLists = true;
        this.editInfoForm.productModel = "";
      }
      this.productModelLists = this.productModeSelect.lv2[key];
    }
  },
  mounted() {
    getRoleId(this);
    this.getAssignList({ companyId: this.compId }, "assignLists");
    this.getFaultSubdivision(
      { username: this.userName },
      "faultLinkSelect",
      "faultTypeLists",
      "faultTypeDetailLists"
    );
    this.getProductModel(
      { username: this.userName },
      "productModeSelect",
      "productTypeLists",
      "productModelLists"
    );
  }
};
</script>

<style scoped="scoped">
.custom /deep/ .ant-form-item {
  width: 24.8%;
  display: inline-block;
}

.bar {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding: 16px 16px 16px 16px;
}

.bar > .title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1890ff;
  padding: 0px 0px 16px 0px;
}

.itemWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.itemWrap > .label {
  min-width: 96px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #424242;
  text-align: right;
  padding: 8px 0px;
}

.itemWrap > .separator {
  padding: 0px 4px;
}

.itemWrap > .content {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #373737;
  text-align: left;
}

.itemWrap.imgBox {
  align-items: flex-start;
}

.itemWrap.imgBox > .content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}

.itemWrap.imgBox > .content > .imgWrap {
  padding: 8px 8px;
  margin: 0px 8px;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  background-color: #ecf2f7;
}

.bar > .title.box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
</style>
